<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="layout" >
<head>
    <meta charset="UTF-8">
    <title> - 豆瓣FM</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/mhzdetail.css">
</head>

<body>
<div th:fragment="content">
<div class="wapper">
    <div class="artist-pager">
        <div class="banner">
            <div class="top">
                <a href="#share"><i href="#" class="icon icon-share"
                                    style="background-image: url(&quot;//img3.doubanio.com/dae/staticng/s/bragi/5c02cfc1f8edbb05fab15d946080d7acc8dc10fb/deploy/344b2810a538209af90d438b8a656757.svg&quot;); background-size: 18px 18px; display: inline-block; height: 18px; width: 18px;"></i>
                    <!-- react-text: 3358 -->分享
                    <!-- /react-text --></a>
            </div>
            <div class="cover" th:style="'background-image:url('+${subject.getCover()}+');'">

            </div>

        </div>
        <div class="inner">
            <h1 class="artist-name" th:text="${singer.getName()}" >椎名林檎</h1>
            <p class="styles"></p>
            <p class="age" >(1978-11-25)</p>
            <div class="actions"><button>喜欢49959</button></div>
            <div class="related-block">
                <a class="playable-link" style="color: rgb(69, 161, 86);"><svg title="Title" viewBox="15 8 10 13"
                                                                               height="12" width="12" class="icon" style="vertical-align: middle;">
                    <desc>Icon</desc>
                    <path
                            d="M16.2404248,8.16131117 L24.4883398,13.8012748 C25.1705534,14.1855546 25.1705534,14.8143854 24.4883398,15.1986903 L16.2404248,20.8387042 C15.5581861,21.222984 15,20.8967404 15,20.1136905 L15,8.88632486 C15,8.1032498 15.5581861,7.7770062 16.2404248,8.16131117 Z"
                            stroke="none" fill="#C6C6C6" fill-rule="evenodd"></path>
                </svg><span style="color: rgb(69, 161, 86);">全部精选歌曲</span></a>
                <ul class="artist-list">
                    <li class="current" th:each="song,it:${songs}">
                        <div class="cover" th:style="'background-image:url('+${song.getCover()}+')'"></div>
                        <span th:text="${it.index+'. '+song.getName()}">1. 月亮代表我的心</span>
                    </li>
                    <li><a class="more-link" href="#">查看全部精选歌曲</a></li>
                </ul>
            </div>
            <div class="related-block">
                <a class="playable-link playable-button" style="color: rgb(69, 161, 86);"><svg title="Title"
                                                                                               viewBox="15 8 10 13" height="12" width="12" class="icon" style="vertical-align: middle;">
                    <desc>Icon</desc>
                    <path
                            d="M16.2404248,8.16131117 L24.4883398,13.8012748 C25.1705534,14.1855546 25.1705534,14.8143854 24.4883398,15.1986903 L16.2404248,20.8387042 C15.5581861,21.222984 15,20.8967404 15,20.1136905 L15,8.88632486 C15,8.1032498 15.5581861,7.7770062 16.2404248,8.16131117 Z"
                            stroke="none" fill="#C6C6C6" fill-rule="evenodd"></path>
                </svg><span style="color: rgb(69, 161, 86);" th:text="${subject.getName()}" >椎名林檎 系</span></a>
                <p>该兆赫可能包含以下相似艺术家的歌曲</p>
                <ul class="similar-artists">
                    <li class="similar-artist" th:each="sig:${simSingers}">
                        <div class="cover" th:style="'background-image:url('+${sig.getAvator()}+')'"></div>
                        <h3 th:text="${sig.getName()}">蔡琴</h3>
                    </li>
                </ul>
            </div>

        </div>

    </div>
</div>
</div>
</body>

</html>